import React, { useEffect, useState } from 'react';
import { withRouter } from 'react-router-dom';
import { Menu } from 'antd';
import useRouter from 'components/hooks/useRouter';
import './index.less'

const { SubMenu } = Menu
interface MenuMap {
    [propname: string]: string
}
const menuMap1: MenuMap = {
    operationCheck: '运维自检',
    operationRecord: '操作记录',
    eventRecord: '异常事件录像',
}
const menu1Title = '智能管控'
const menu2Title = '系统设置'
const menuMap2: MenuMap = {
    pileConfig: '路桩配置',
    monitorConfig: '监控配置',
    userManage: '用户管理',
    firmwareUpdate: '固件更新'
}

const MainPage = () => {
    const router = useRouter();
    const [titles, setTitles] = useState([menu1Title, menu2Title])
    const handleClick = (e: any) => {
        router.push(`/${e.key}`);
    };
    useEffect(() => {
        const key = router.pathname.slice(1)
        setTitles([menuMap1[key] || menu1Title, menuMap2[key] || menu2Title])   
    }, [router.pathname])
    return (
        <>
            <Menu onClick={handleClick} mode="horizontal">
                <Menu.Item key="home" className="menu-class">首页</Menu.Item>
                <SubMenu title={titles[0]} className="menu-class">
                    <Menu.ItemGroup className="menu-class">
                        <Menu.Item key="operationCheck">运维自检</Menu.Item>
                        <Menu.Item key="operationRecord">操作记录</Menu.Item>
                        <Menu.Item key="eventRecord">异常事件录像</Menu.Item>
                    </Menu.ItemGroup>
                </SubMenu>
                <SubMenu title={titles[1]} className="menu-class">
                    <Menu.ItemGroup className="menu-class">
                        {
                            Object.keys(menuMap2).map(key => <Menu.Item key={key}>{menuMap2[key]}</Menu.Item>)
                        }
                    </Menu.ItemGroup>
                </SubMenu>
            </Menu>
        </>
    );
};
export default withRouter(MainPage);
